<template>
	<view class="fee_main">
		<view class="fee_main_bgBox">
			<uni-forms ref="formRef" label-width="150" :model="orderFeeVo">
				<view class="item_fee">
					<view class="title_heade">
						基本信息
					</view>
					<uni-forms-item label="申请类型">
						<view class="item_content">
							<span><uni-data-checkbox v-model="orderFeeVo.type" :localdata="orderFeeVoTypeList" /></span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="服务商配件类型" v-if="orderFeeVo.type==2">
						<view class="item_content">
							<span style="width: 66%;"><uni-data-select v-model="orderFeeVo.networkSpareType"
									:clear="false" :localdata="SpareTypeList" /></span>
						</view>
					</uni-forms-item>
					<uni-forms-item label="收货地址类型">
						<view class="item_content">
							<span><uni-data-checkbox @change="addressChange" v-model="orderFeeVo.receiptAddrType"
									:localdata="addressTypeList" /></span>
						</view>
					</uni-forms-item>
				</view>
				<view class="item_fee" v-for="(item,index) in orderFeeVo.spareMaterialVos" :key="index">
					<view class="item_fee_tableHead">
						<view class="item_fee_tableHead_left" @click="item.isShow=!item.isShow">
							<span :class="item.isShow?'down_up_':'down_up'"></span>配件{{index+1}}
						</view>
						<uni-icons @click="deleteFun(index)" v-if="orderFeeVo.spareMaterialVos.length==1?false:true"
							type="minus-filled" color=" rgba(245, 108, 108, 1)" size="24"></uni-icons>
					</view>
					<view v-if="!item.isShow">
						<uni-forms-item label="结算类型">
							<view class="item_content"><span style="width: 34%;"><uni-data-select
										@change="changeType(index)" v-model="item.type" :clear="false"
										:localdata="typeList"></uni-data-select></span></view>
						</uni-forms-item>
						<uni-forms-item required :name="['spareMaterialVos',index,'name']" label="配件名称"
							:rules="[{ required: true, errorMessage: '请选择配件' },]">
							<view class="item_content">
								<span v-if="item.name" @click="showSpare(index)"
									class="content_name">{{item.name}}</span>
								<input @click="showSpare(index)" class="input_pl" v-else v-model="item.name"
									placeholder="请选择" />
								<uni-icons type="down" color="#999" size="14"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item required label="型号">
							<view class="item_content"><span class="content_name">{{item.model}}</span></view>
						</uni-forms-item>
						<uni-forms-item required :name="['spareMaterialVos',index,'specName']" label="规格"
							:rules="[{ required: true, errorMessage: '请选择规格' },]">
							<view class="item_content">
								<span v-if="item.specName" @click="showSpareSpec(index,item.spareId)"
									class="content_name">{{item.specName}}</span>
								<input @click="showSpareSpec(index,item.spareId)" class="input_pl" v-else
									v-model="item.specName" placeholder="请选择" />
								<uni-icons type="down" color="#999" size="14"></uni-icons>
							</view>
						</uni-forms-item>
						<uni-forms-item label="申请数量">
							<span class="item_content"><uni-number-box :min="1" v-model="item.qty" /></span>
						</uni-forms-item>
						<!-- 平台承担 -->
						<uni-forms-item label="单价金额" v-if="item.type==2">
							<view class="item_content" v-if="item.isChangePrice"><span
									class="input_with_span">￥<uni-easyinput maxlength="8" class="input_with"
										type="number" :clearable="false" placeholder="0.00"
										v-model="item.price"></uni-easyinput></span>
							</view>
							<span class="item_content" v-else>￥{{item.price.toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-if="item.type==2">
							<span class="item_content">￥{{(item.price*item.qty).toFixed(2)}}</span>
						</uni-forms-item>
						<!-- 商家承担 -->
						<uni-forms-item label="单价金额" v-if="item.type==1">
							<view class="item_content" v-if="item.isChangePrice"><span
									class="input_with_span">￥<uni-easyinput maxlength="8" class="input_with"
										type="number" :clearable="false" placeholder="0.00"
										v-model="item.receiveFactoryPrice"></uni-easyinput></span>
							</view>
							<span class="item_content" v-else>￥{{item.receiveFactoryPrice.toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="总金额" v-if="item.type==1">
							<span class="item_content">￥{{(item.receiveFactoryPrice*item.qty).toFixed(2)}}</span>
						</uni-forms-item>
						<uni-forms-item label="">
							<span style="color: #606266;font-size: 14px;">备注</span>
							<view class="text_input">
								<uni-easyinput type="textarea" :inputBorder="false" placeholderStyle="font-size:14px;"
									:maxlength="100" v-model="item.remark" placeholder="填写备注"></uni-easyinput>
								<view class="coun">
									{{item.remark.length}}/100
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item style="border-bottom: none;" label="">
							<span style="color: #606266;font-size: 14px;">图片({{item.imgarr.length}}/8)</span>
							<view class="pic_img">
								<uni-file-picker @select="(files)=>onsuccessImg(files,index)" limit="8"
									:auto-upload="false" @delete="(file)=>ondeleteImg(file,index)"
									file-extname="jpg,jpeg,png" :imageStyles="imageStyles" file-mediatype="image"
									v-model="item.imgarr" />
							</view>
						</uni-forms-item>
					</view>
				</view>
				<view class="item_fee">
					<uni-forms-item style="border-bottom: none;" label="收货人姓名">
						<view class="item_content"><span class="content_name">{{orderFeeVo.receiptName}}</span></view>
					</uni-forms-item>
					<uni-forms-item style="border-bottom: none;" label="收货人手机">
						<view class="item_content"><span class="content_name">{{orderFeeVo.receiptPhone}}</span></view>
					</uni-forms-item>
					<uni-forms-item style="border-bottom: none;" label="收货人地址">
						<view class="item_content"><span
								class="content_name">{{orderFeeVo.receiptProvince+orderFeeVo.receiptCity+orderFeeVo.receiptArea+orderFeeVo.receiptTown}}</span>
						</view>
					</uni-forms-item>
					<uni-forms-item style="border-bottom: none;" label="详细地址">
						<view class="item_content"><span class="content_name">{{orderFeeVo.receiptAddress}}</span>
						</view>
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="footer_order">
			<view class="footer_order_left" @click="addFeeItem">
				<uni-icons type="plus-filled" color="#00c0c0" size="28"></uni-icons>
				<p class="gray_tip">添加配件</p>
			</view>
			<view class="footer_order_right" @click="submitFun">
				<view class="btn">提交申请</view>
			</view>
		</view>
		<!-- 搜索配件 -->
		<uni-popup ref="popupSpareRef" type="bottom">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="title_tip">
						配件搜索
					</view>
					<uni-icons type="clear" size="28" color="#ccc" @click="popupSpareRef.close()"></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar class="search_card_bar" @confirm="searchMobileSpareSelectList" placeholder="关键词搜索"
						radius="100" bg-color="rgba(242, 243, 245, 1)" cancelButton="none" :focus="true"
						v-model="selectVoSpare.name" @input="input" @clear="clear">
					</uni-search-bar>
					<view class="search_btn">
						搜索
					</view>
				</view>
				<view class="search_muen">
					<view class="msg_kong" v-if="spareList.length==0">
						暂未查询到配件
					</view>
					<view v-for="(item,index) in spareList" :key="index" class="search_muen_item"
						@click="onSpareItem(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 搜索规格 -->
		<uni-popup ref="popupSpareSpecRef" type="bottom">
			<view class="popup-content">
				<view class="popup-content_title">
					<view class="title_tip">
						规格搜索
					</view>
					<uni-icons type="clear" size="28" color="#ccc" @click="popupSpareSpecRef.close()"></uni-icons>
				</view>
				<view class="search_card">
					<uni-search-bar class="search_card_bar" @confirm="OrderSpareSpecSelectList" placeholder="关键词搜索"
						radius="100" bg-color="rgba(242, 243, 245, 1)" cancelButton="none" :focus="true"
						v-model="selectVoSpareSpec.name" @input="inputSpec" @clear="clearSpec">
					</uni-search-bar>
					<view class="search_btn">
						搜索
					</view>
				</view>
				<view class="search_muen">
					<view class="msg_kong" v-if="SpareSpecList.length==0">
						暂未查询到规格
					</view>
					<view v-for="(item,index) in SpareSpecList" :key="index" class="search_muen_item"
						@click="onSpareSpecItem(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import _ from "lodash"
	import { onReachBottom, onPullDownRefresh, onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'
	import apiOrder from "@/util/network_api/apiOrder.js"
	import apiUpload from '@/util/network_api/upload.js'
	const workId = ref(null)//工单Id
	const formRef = ref()
	onLoad(async (e) => {
		if (!e.workId) return
		workId.value = e.workId
		new Promise(() => {
			getUserAddress()
		})
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const imageStyles = {
		"height": 80,	// 边框高度
		"width": 80,	// 边框宽度
		"border": { // 如果为 Boolean 值，可以控制边框显示与否
			"color": "#eee",		// 边框颜色
			"width": "1px",		// 边框宽度
			"style": "solid", 	// 边框样式
		}
	}
	const orderFeeVo : any = ref({
		"delSpareMaterialIds": [],
		"networkSpareType": 1,
		"receiptAddrType": 1,
		"receiptAddress": "",
		"receiptArea": "",
		"receiptCity": "",
		"receiptName": "",
		"receiptPhone": "",
		"receiptProvince": "",
		"receiptTown": "",
		"remark": "",
		"spareMaterialVos": [
			{
				"delImageIds": [],
				"images": [],
				"model": "",//物料型号
				"name": "",
				"overinsured": true,//物料质保状态：false-保内，true-保外
				"price": 0,
				payNetworkPrice: 0,
				receiveFactoryPrice: 0,
				"qty": 1,
				"remark": "",
				"spareId": null,//物料备件ID
				"specId": null,//备件规格ID
				"specName": "",//备件规格名称
				"specSku": "",//	商品规格编号
				"type": 1,//	1-商家承担，2-平台承担,示例值(1)
				isShow: false,
				isChangePrice: false,
				imgarr: [],
			},
		],
		"type": 1,//申请类型：1-商家/总部配件，2-外部配件,示例值(1)
		"userOrNetworkId": 0,
		"workId": 0
	})
	const onsuccessImg = (files, index) => {
		files.tempFiles.map(o => {
			orderFeeVo.value.spareMaterialVos[index].imgarr.push(o)
		})
	}
	const ondeleteImg = (file, index) => {
		orderFeeVo.value.spareMaterialVos[index].imgarr = orderFeeVo.value.spareMaterialVos[index].imgarr.filter(o => {
			return o.uuid != file.tempFile.uuid
		})
	}
	// 结算类型
	const typeList = ref([
		{ text: '商家承担', value: 1 },
		{ text: '平台承担', value: 2 }
	])
	// 申请类型
	const orderFeeVoTypeList = ref([
		{ text: '平台配件', value: 1 },
		{ text: '外部配件', value: 2 }
	])
	// 收货地址类型
	const addressTypeList = ref([
		{ text: '工单客户', value: 1 },
		{ text: '服务商', value: 2 }
	])
	// 服务商配件类型
	const SpareTypeList = ref([
		{ text: '服务商-外部仓配件', value: 1 },
		{ text: '工程师-外部仓配件', value: 2 },
		{ text: '自购配件', value: 3 }
	])
	// 添加费用
	const addFeeItem = () => {
		let result = orderFeeVo.value.spareMaterialVos.every(o => o.spareId)
		let indexShow = orderFeeVo.value.spareMaterialVos.some(o => o.isShow)
		if (!result && indexShow) {
			uni.showToast({
				title: '请先选择配件',
				icon: 'none'
			})
			return
		}
		formRef.value.validate().then(() => {
			orderFeeVo.value.spareMaterialVos.push({
				"delImageIds": [],
				"images": [],
				"model": "",
				"name": "",//配件名称
				"overinsured": true,//物料质保状态：false-保内，true-保外
				"price": 0,
				payNetworkPrice: 0,
				receiveFactoryPrice: 0,
				"qty": 1,
				"remark": "",
				"spareId": null,//物料备件ID
				"specId": null,//备件规格ID
				"specName": "",//备件规格名称
				"specSku": "",//	商品规格编号
				"type": 1,//	1-商家收取，2-平台承担,示例值(1)
				isShow: false,
				isChangePrice: false,
				imgarr: [],
			})
		})
	}
	// 删除费用
	const deleteFun = (index) => {
		orderFeeVo.value.spareMaterialVos.splice(index, 1)
	}
	// 提交
	const submitFun = async () => {
		if (!workId.value) return
		let result = orderFeeVo.value.spareMaterialVos.every(o => o.spareId)
		let indexShow = orderFeeVo.value.spareMaterialVos.some(o => o.isShow)
		if (!result && indexShow) {
			uni.showToast({
				title: '请先选择配件',
				icon: 'none'
			})
			return
		}
		await formRef.value.validate().then(async res => {
			uni.showLoading({
				title: '加载中...'
			})
			for (let i = 0; i < orderFeeVo.value.spareMaterialVos.length; i++) {
				let item = orderFeeVo.value.spareMaterialVos[i]
				item.images = []
				if (item.imgarr.length > 0) {
					for (let j = 0; j < item.imgarr.length; j++) {
						let img = item.imgarr[j]
						await apiUpload.uploadOrderFile({ files: img.file }).then(res => {
							item.images.push({ id: null, image: res.data.rows[0] })
						})
					}
				}
			}
			orderFeeVo.value.workId = workId.value
			let dataObj = _.cloneDeep(orderFeeVo.value)
			dataObj.spareMaterialVos = dataObj.spareMaterialVos.map(o => {
				delete o.imgarr
				delete o.isShow
				delete o.isChangePrice
				return o
			})
			await apiOrder.saveApplySpare(dataObj).then(res => {
				if (res.code == 20000) {
					uni.hideLoading()
					uni.showToast({
						title: '申请配件',
						icon: 'success'
					})
					uni.setStorageSync('order_detail', 1)
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/pages_network/order/detail?workId=' + workId.value
						})
					}, 600)
				}
			})
			uni.hideLoading()
		}).catch(err => { })

	}
	// *********配件***********
	// 获取配件列表下拉
	const spareList = ref([])
	const popupSpareRef = ref()//配件列表ref
	const selectVoSpare = ref({
		"limit": 0,
		"name": "",
		"page": 0
	})
	// 搜索列表
	const searchMobileSpareSelectList = async () => {
		uni.showLoading({
			title: "搜索中...",
		})
		selectVoSpare.value.name = selectVoSpare.value.name.trim()
		await apiOrder.getMobileSpareSelect(selectVoSpare.value, workId.value).then(res => {
			spareList.value = res.data.rows
		})
		uni.hideLoading()
	}
	const clear = () => {
		selectVoSpare.value.name = ''
		searchMobileSpareSelectList()
	}
	const input = _.debounce(() => {
		if (!selectVoSpare.value.name) return
		searchMobileSpareSelectList()
	}, 600)
	// 配件搜索列表
	const indexOnItem = ref()//记录配件费用位置
	const showSpare = (index) => {
		searchMobileSpareSelectList()
		popupSpareRef.value.open()
		indexOnItem.value = index
	}
	const onSpareItem = async (item) => {
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].name = item.name
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].spareId = item.id
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].model = item.model

		orderFeeVo.value.spareMaterialVos[indexOnItem.value].specName = ''
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].specId = ''
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].specSku = ''
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].price = 0
		orderFeeVo.value.spareMaterialVos[indexOnItem.value].receiveFactoryPrice = 0
		spareId.value = item.id
		indexSpecOnItem.value = indexOnItem.value
		await OrderSpareSpecSelectList()
		if (SpareSpecList.value.length > 0) {
			onSpareSpecItem(SpareSpecList.value[0])
		}
		popupSpareRef.value.close()
	}
	// **********规格***********
	const popupSpareSpecRef = ref()
	const SpareSpecList = ref([])
	const selectVoSpareSpec = ref({
		"limit": 0,
		"name": "",
		"page": 0
	})
	const OrderSpareSpecSelectList = async () => {
		uni.showLoading({
			title: "搜索中...",
		})
		selectVoSpareSpec.value.name = selectVoSpareSpec.value.name.trim()
		await apiOrder.getOrderSpareSpecSelect(selectVoSpareSpec.value, spareId.value).then(res => {
			SpareSpecList.value = res.data.rows
		})
		uni.hideLoading()
	}
	const clearSpec = () => {
		selectVoSpareSpec.value.name = ''
		OrderSpareSpecSelectList()
	}
	const inputSpec = _.debounce(() => {
		if (!selectVoSpareSpec.value.name) return
		OrderSpareSpecSelectList()
	}, 600)
	// 配件搜索列表
	const indexSpecOnItem = ref(0)//记录配件费用位置
	const spareId = ref('')
	const showSpareSpec = (index, id) => {
		if (!id) {
			uni.showToast({
				title: '请先选择配件',
				icon: 'none'
			})
			return
		}
		spareId.value = id
		indexSpecOnItem.value = index
		OrderSpareSpecSelectList()
		popupSpareSpecRef.value.open()
	}
	// 点击规格
	const onSpareSpecItem = (item) => {
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].specName = item.name
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].specId = item.id
		orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].specSku = item.specSkuCode
		if (orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 2) {
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price = item.overPrice
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].receiveFactoryPrice = 0
		} else {
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].receiveFactoryPrice = item.overPrice
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price = 0
		}
		popupSpareSpecRef.value.close()
	}
	// ***点击结算类型变化
	const changeType = (index) => {
		if (orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].type == 2) {
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price = orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].receiveFactoryPrice
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].receiveFactoryPrice = 0
		} else {
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].receiveFactoryPrice = orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price
			orderFeeVo.value.spareMaterialVos[indexSpecOnItem.value].price = 0
		}
	}
	// ****获取地址****
	// 客户地址
	const getUserAddress = () => {
		apiOrder.getMobileWorkUserAddress(workId.value).then(res => {
			if (res.code == 20000) {
				let row = res.data.row
				orderFeeVo.value.receiptAddress = row.address
				orderFeeVo.value.receiptArea = row.area
				orderFeeVo.value.receiptCity = row.city
				orderFeeVo.value.receiptName = row.name
				orderFeeVo.value.receiptPhone = row.phone
				orderFeeVo.value.receiptProvince = row.province
				orderFeeVo.value.receiptTown = row.town
				orderFeeVo.value.userOrNetworkId = row.id
			}
		})
	}
	// 服务商地址
	const getNetworkAddress = () => {
		apiOrder.getMobileOrderNetworkAddress(workId.value).then(res => {
			if (res.code == 20000) {
				let row = res.data.row
				orderFeeVo.value.receiptAddress = row.address
				orderFeeVo.value.receiptArea = row.area
				orderFeeVo.value.receiptCity = row.city
				orderFeeVo.value.receiptName = row.name
				orderFeeVo.value.receiptPhone = row.phone
				orderFeeVo.value.receiptProvince = row.province
				orderFeeVo.value.receiptTown = row.town
				orderFeeVo.value.userOrNetworkId = row.id
			}
		})
	}
	const addressChange = (val) => {
		if (val.detail.value == 1) {
			getUserAddress()
		} else {
			getNetworkAddress()
		}
	}
</script>

<style lang="scss" scoped>
	.fee_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&_bgBox {
			margin: 24rpx;
			padding-bottom: 10vh;

			.info_base {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;
			}

			.item_fee {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;

				.title_heade {
					padding: 12rpx 0;
					font-weight: bold;
					font-size: 28rpx;
				}

				:deep(.uni-forms-item) {
					margin-bottom: 20rpx;
					border-bottom: 1rpx solid rgb(243, 244, 248);

				}

				:deep(.uni-select) {
					border: none;

					.uni-select__input-placeholder {
						text-align: right;
						margin-right: 12rpx;
						font-size: 27rpx;
						color: #999;
					}

					.uni-select__input-text {
						text-align: right;
						margin-right: 12rpx;
						font-size: 27rpx;
					}

					.uni-popper__arrow {
						left: 66%;
					}

					.uni-select__selector {
						top: 100%;
					}
				}

				&_tableHead {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					&_left {
						font-size: 28rpx;
						font-weight: bold;
						display: flex;
						align-items: center;

						.down_up {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-left: 12rpx solid transparent;
							border-top: 14rpx solid #000;
							margin-right: 6rpx;
						}

						.down_up_ {
							width: 0;
							height: 0;
							border-right: 12rpx solid transparent;
							border-left: 12rpx solid transparent;
							border-bottom: 14rpx solid #000;
							margin-right: 6rpx;
						}
					}
				}

				.item_content {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 100%;

					:deep(.checklist-box) {
						margin-left: 40rpx;
						margin-right: 0;
					}

					.input_pl {
						color: #999;
						width: 100rpx;
						font-size: 28rpx
					}

					.content_name {
						flex: 1;
						text-align: right;
						width: 300rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						margin-right: 12rpx;
					}

					.input_with_span {
						display: flex;
						align-items: center;
						height: 28px;
						margin-bottom: 10px;
					}

					:deep(.input_with) {
						.uni-easyinput__content {
							width: 180rpx !important;
						}
					}
				}

				.text_input {
					margin: 24rpx 0 0;
					position: relative;

					:deep(.uni-easyinput__content-textarea) {
						margin: 0;
						// background-color: #fff !important;
					}

					padding: 12rpx 12rpx 24rpx;
					background-color:#fff;
					border: 1rpx solid rgb(243, 244, 248);
					border-bottom: none;

					.coun {
						font-size: 22rpx;
						position: absolute;
						right: 12rpx;
						bottom: 6rpx;
						color: #999;
					}
				}

				.pic_img {
					margin-top: 24rpx;

					:deep(.icon-add) {
						width: 30rpx;
						height: 3rpx;
						background-color: #aaa;
					}

					:deep(.icon-del) {
						width: 24rpx;
					}

					:deep(.icon-del-box) {
						width: 40rpx;
						height: 40rpx;
						top: 0;
						right: 0;
						background-color: rgba(0, 0, 0, 0.3);
					}

					:deep(.uni-progress-bar) {
						display: none;
					}
				}
			}
		}

		.footer_order {
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			z-index: 99;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 48rpx;
			box-sizing: border-box;
			border-top: 1rpx solid rgba(177, 177, 177, 0.1);

			&_left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 24rpx;

				.gray_tip {
					color: #00c0c0;
				}
			}

			&_right {
				flex: 1;
				border-radius: 45rpx;
				height: 80rpx;
				background-color: #007cff;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.popup-content {
			height: 86vh;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			flex: 1;

			&_title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 24rpx 0;

				.title_tip {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.search_card {
				display: flex;
				align-items: center;
				margin: 0 24rpx;

				&_bar {
					flex: 1;
				}

				.search_btn {
					font-size: 28rpx;
					color: #007cff;
					font-weight: bold;
				}
			}

			.search_muen {
				flex: 1;
				overflow: auto;
				margin: 24rpx;
				padding-bottom: 15%;

				&_item {
					font-size: 30rpx;
					border-bottom: 1rpx solid rgba(242, 243, 245, 1);
					padding: 20rpx 32rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.msg_kong {
					color: #999;
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					height: 80%;
				}
			}
		}
	}
</style>